import React, { useState, useCallback } from "react";
import Son from "./Son";

export default function Index() {
  console.log("父组件渲染");
  const [count, setCount] = useState(3);
  const [age, setAge] = useState(12);

  const changeCount = () => {
    setCount(count + 1);
  };

  const changeAge=()=>{
    setAge(age+1);
  }

  // const fn01 = () => {
  //   console.log("fn01");
  // }

  // useCallback的作用：防止函数的无效重复定义。
  // 当依赖发生变化才重新定义函数。
  const fn01 = useCallback(() => {
      console.log("fn01");
  },[])

  return (
    <div>
      <h1>useCallBack</h1>
      <p>count:{count}</p>
      <input type="button" value="修改count" onClick={changeCount} />
      <p>年龄:{age}</p>
      <input type="button" value="修改age" onClick={changeAge} />
      
      <Son age={age} fn01={fn01} ></Son>
    </div>
  );
}
